<template>
  <div>
    <meta name="referrer" content="no-referrer" />
<el-input  v-model="input" placeholder="商品编号或名称" size="normal" clearable  style="width: 200px;"></el-input>
<el-button type="primary" size="default" @click="search">查询</el-button>
<el-button type="primary" size="default" @click="dialogFormVisible=true">新增商品</el-button>
<el-table :data="tableData" height="600" style="width: 100%">
    <el-table-column prop="id" label="商品编号" width="100" />
    <el-table-column prop="name" label="商品名称" width="150" />
    <el-table-column prop="price" label="商品价格" width="150" />
    <el-table-column label="商品图片" width="180" >
    <template #default="{row}">
        <div style="display: flex; align-items: center">
            <el-image :src="row.photo" style="width: 100px; height: 100px;" />
        </div>
    </template>
</el-table-column>
    <el-table-column prop="originName" label="商品地区 " width="150" />
    <el-table-column prop="categoryName" label="商品分类 " width="150" />
    <el-table-column  label="操作 " width="150" >
      <template #default="scope">
        <el-button link type="primary" size="small" @click="remove(scope.$index)" >删除</el-button>
        <el-button link type="primary" size="small" @click="handleEdit(scope.$index)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog v-model="dialogFormVisible" title="商品信息">
    <el-form :model="form">
      <el-form-item label="商品名称" >
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="商品价格" >
        <el-input v-model="form.price" autocomplete="off" />
      </el-form-item>
      <!-- <el-form-item label="商品库存" >
        <el-input v-model="form.num" autocomplete="off" />
      </el-form-item> -->
      <el-form-item label="商品图片" >
        <el-input v-model="form.photo" autocomplete="off" />
      </el-form-item>
      <el-form-item label="商品地区" >
        <el-select
    v-model="form.originName"
    class="m-2"
    placeholder="请选择地区"
    size="large"
    style="width: 240px"
  >
    <el-option
      v-for="(item,index) in options"
      :key="index"
      :label="item.name"
      :value="item.name"
    />
  </el-select>
      </el-form-item>
      <el-form-item label="商品分类" >
        <el-select
    v-model="form.categoryName"
    class="m-2"
    placeholder="请选择种类"
    size="large"
    style="width: 240px"
  >
    <el-option
      v-for="(item,index) in kind"
      :key="index"
      :label="item.name"
      :value="item.name"
    />
  </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="addItem">
         确定
        </el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog v-model="editformVisible" title="商品信息">
    <el-form :model="form">
      <el-form-item label="商品编号" >
        <el-input v-model="form.id" autocomplete="off" />
      </el-form-item>
      <el-form-item label="商品名称" >
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="商品地区" >
        <el-select
    v-model="form.originName"
    class="m-2"
    placeholder="请选择地区"
    size="large"
    style="width: 240px"
  >
    <el-option
      v-for="(item,index) in options"
      :key="index"
      :label="item.name"
      :value="item.name"
    />
  </el-select>
      </el-form-item>
      <el-form-item label="商品分类" >
        <el-select
    v-model="form.categoryName"
    class="m-2"
    placeholder="请选择种类"
    size="large"
    style="width: 240px"
  >
    <el-option
      v-for="(item,index) in kind"
      :key="index"
      :label="item.name"
      :value="item.name"
    />
  </el-select>
      </el-form-item>
      <el-form-item label="商品图片" >
     <input type="file" name="" id="">
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="editformVisible = false">取消</el-button>
        <el-button type="primary" @click="Editconfirm">
         确定
        </el-button>
      </span>
    </template>
  </el-dialog>
  </div>
</template>

<script>
import axios from '@/utils/request';
import { toRaw } from 'vue';
export default {
name:'ItemManage',
inject:['reload'],
data() {
  return {
    Areaid:'',
    Sortid:'',
    options:[],
    kind:[],
    input:'',
    editformVisible:false,
    dialogFormVisible:false,
    form:{
      id:'',
      name:'',
      originName:'',
      num:'',
      price:'',
      categoryName:'',
      photo:'',
      introduction:'',
    },
    tableData:[
    ],
    searchData:{}
  }
},
methods:{
  remove(index){
    const parmas={
      id:this.tableData[index].id
    }
    axios.post('/ser_product/delete',JSON.stringify(parmas)).then(res=>{
console.log(res);
    })
    this.tableData.splice(index,1)
  },
   handleEdit(index){
      this.form =this.tableData[index]
      //把当前编辑的行号赋值给全局保存的行号
      this.editformVisible = true
  },
  Editconfirm(){
    console.log(this.form);
    // console.log(this.form.id);
    this.setSortid(this.form.categoryName)
    this.setAreaid(this.form.originName)
    console.log(this.Areaid);
    console.log(this.Sortid);
    const params={
      id:this.form.id,
      category:this.Sortid,
      origin:this.Areaid,
      name:this.form.name,
      num:this.form.num,
      price:this.form.price,
      photo:this.form.photo,
      introduction:this.form.introduction,
    }
    // console.log(params);
    axios.post('/ser_product/update',JSON.stringify(params))
    this.form={}
    this.editformVisible=false
  },

  addItem(){
    this.tableData.push(this.form)
    this.setSortid(this.form.categoryName)
    this.setAreaid(this.form.originName)
    const params={
      // id:this.form.id,
      category:this.Sortid,
      origin:this.Areaid,
      name:this.form.name,
      // num:this.form.num,
      price:this.form.price,
      photo:this.form.photo,
      introduction:this.form.introduction,
    }
    axios.post('/ser_product/insert',JSON.stringify(params))
    this.reload()
    this.getall()
    this.form={}
    this.dialogFormVisible=false

  },
  search(){
  // this.tableData = this.tableData.filter(v =>(v.id.includes(this.input))||(v.name.includes(this.input)))
  // this.tableData = this.tableData.filter(v =>(v.id.includes(this.input))||(v.name.includes(this.input)))
   for(let i=0;i<this.tableData.length;i++)
   {
    if(this.input==this.tableData[i].id)
    {
      this.tableData=this.tableData[i]
      console.log(3);
      console.log(this.tableData);
    }
   }
  console.log(this.tableData);
  },
  getall(){
    axios.get('/ser_product/selall').then(res=>{
      this.tableData=toRaw(res.data)
      console.log(res.data);
      console.log(this.tableData);
    })
  },
  getArea(){
    axios.get('/select/selallorigin').then(res=>{
      this.options=res.data
// console.log(this.options[0].id);
    })
  },
  getkind(){
    axios.get('/select/selallcategory').then(res=>{
      this.kind=res.data
      // console.log(this.kind[1].name);
    })
  },
  setSortid(Sortname){
    for(let i=0;i<this.kind.length;i++)
    {
      if(this.kind[i].name===Sortname)
      {
        this.Sortid=this.kind[i].id
      }
    }
  },
  setAreaid(Areaname){
    for(let i=0;i<this.options.length;i++)
    {
      if(this.options[i].name===Areaname)
      {
        this.Areaid=this.options[i].id
      }
    }
  }
},
mounted(){
  this.getall(),
  this.getArea(),
  this.getkind()
}
}
</script>

<style>

</style>